<template>
  <div class="Login">
    <img src="https://cimg.axureshop.com/28/d0/93/28d0933e0c9f40ce99dc79bdae082541/images/%E7%99%BB%E5%BD%95/u37.png">
    <van-form>
      <van-cell-group inset>
        <van-field v-model="phone" name="手机号" label="手机号" placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }]" />
        <van-field v-model="code" name="验证码" label="验证码" placeholder="请输入验证码"
          :rules="[{ required: true, message: '请输入验证码' }]">
        </van-field>
        <van-field name="checkbox" :rules="[{required:true,message:'请勾选协议'}]">
          <template #input>
            <van-checkbox v-model="checked" shape="square" style="font-size:14px;margin: 20px;" checked-color="#55a034"  >我已同意 &lt&lt <span style="color:#55a034;font-size:14px">用户协议</span> >> </van-checkbox>
           </template>
        </van-field>
        <van-button round block type="primary" @click="getCode" color="#55a034" style="margin-top: 26px;"> 
          获取验证码
        </van-button>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" @click="handleSubmit" color="#55a034">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>


<script setup>
import { ref } from 'vue';
import { getCodeData, loginSession } from '../../api/user';
import useUserStore from '../../store/user'
import { useRouter } from 'vue-router';
import { Toast } from 'vant';
import 'vant/es/toast/style';
const userStore = useUserStore()
const checked = ref(false);
const router=useRouter()
const phone = ref(1323981243)
const code = ref()
const getCode = async () => {
  const { code: getcode } = await getCodeData(phone.value)
  code.value = getcode
}
const handleSubmit = async () => {
  if(!checked.value){
    Toast('请勾选协议')
    return
  }
  const info = {
    phone: phone.value,
    code: code.value
  }
  const { token, userInfo } = await loginSession(info)
  if (userInfo) {
    userStore.token = token
    userStore.userInfo = userInfo
    router.push('/mine')
    console.log(userInfo)
    console.log(token)
  } else {
    return 
  }
}
</script>


<style lang="less" scoped>
.Login {
  img {
    width: 100%;
    margin-bottom: 10px;
  }
}
</style>